<template>
<div class="device_list">
	<!--日期选择-->
	<div class="search">
		<template>
			  <div class="block">
			    <el-date-picker
			      v-model="timeValue"
			      type="daterange"
			      range-separator="至"
			      start-placeholder="开始日期"
			      end-placeholder="结束日期"
			      format="yyyy 年 MM 月 dd 日"
      			  >
			    </el-date-picker>
			    <el-button icon="el-icon-search" style='margin-left:30px;' @click='requestList' round>搜索</el-button>
			  </div>
		</template>
		<hr />
	</div>
		<!--饼状图-->
	<el-row class="zhe_xian">
		<el-col :span="24" style='margin-left:55px;'>
			<div v-show="this.cookieDates" class="grid-content bg-purple-light" id="cookiePic" style="width:660px;height:400px;display:inline-block;"></div>
			<div v-show="this.pillarDates" class="grid-content bg-purple-light" id="postPic" style="width:500px;height:400px;display:inline-block;"></div>
		</el-col>
	</el-row>
	<!--中间部分的内容-->
	<div class="midd">
		<div class="biao">
			<el-table
				:data="tableData"
				border
				v-loading="listLoading"
				:header-cell-class-name="tableheaderClassName"
				:row-class-name="tableRowClassName"
				>
				<el-table-column
					prop="interfaceName"
					label="接口名称">
				</el-table-column>
				<el-table-column
					prop="interfaceUrl"
					label="路径"
					width='280px'>
				</el-table-column>
				<el-table-column
					prop="accessAppSize"
					label="访问应用个数">
				</el-table-column>
				<el-table-column
					prop="totalAccessSize"
					label="总访问次数">
				</el-table-column>	
				 <el-table-column
					prop="successPercent"
					label="成功率(%)">
				</el-table-column>
				<el-table-column
					prop="maxProcessTime"
					label="最大响应时间(ms)">
				</el-table-column>		
				<el-table-column
					prop="minProcessTime"
					label="最小响应时间(ms)">
				</el-table-column>	
				<el-table-column
					prop="avgProcessTime"
					label="平均响应时间(ms)">
				</el-table-column>	
				<el-table-column
					fixed="right"
					label="操作">
					<template slot-scope="scope" style="text-align:center;">
						<el-button  style="text-align:center;"  type="text" size="small"><span  @click="InterfaceDetails(scope.row)">详情</span></el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
		<!--分页-->
		<div class="di claerfix" >
			<div class="di_foot" style="margin:0 auto;">
				<el-pagination
					style="text-align: center;"
					background
					layout="prev, pager, next" 
					@current-change="handleCurrentChange" 
					:total="countTotal" 
				>
				</el-pagination>
			</div>
		</div>
	</div>
</div>
</template>
<script>
import  echarts from 'echarts';
import { interfaceUse, interfaceCookie, interfacePillar, checkLogin } from '../../api/api.js';
export default{
	name:"innerInterfaceUse",
	data(){
		return{
		    timeValue:'',
			tableData: [],
			type:1,//使用情况类型
			startDate:'',
			endDate:'',
			pageNumber: 1,
			pageSize: 10,
			countTotal:0,
			size:5,
			cookieArr:[],//饼状图数据
			cookieArr2:[],//饼状图解释
			pillarArr:[],//柱状图数据
			pillarArr2:[],//柱状图解释
			cookieDates:false,
			pillarDates:false,
			listLoading:false,
			addDeviceList:false,
			formLabelWidth:'100px',
		}
	},
	methods:{
		//请求列表数据
		requestList(){
			if(this.timeValue==null || this.timeValue.length!=2){
				return
			}
			let start = this.timeValue[0];
			let year = start.getFullYear();
			let month = start.getMonth()+1;
			let datas = start.getDate();
			let end = this.timeValue[1];
			let endyear = end.getFullYear();
			let endmonth = end.getMonth()+1;
			let enddatas = end.getDate();
			this.startDate = (year.toString())+'-'+(month.toString())+'-'+(datas.toString());
			this.endDate = (endyear.toString())+'-'+(endmonth.toString())+'-'+(enddatas.toString());
			this.getUsers();
			this.getUsers2();
			this.getUsers3();
		},
		//获取用户列表
		getUsers() {
			let para = {
				pageNumber: this.pageNumber,
				pageSize: this.pageSize,
				startDate: this.startDate,
				endDate: this.endDate,
				interfaceType:this.type
			};
			console.log(this.startDate)
			console.log(this.endDate)
			this.listLoading = true;
			interfaceUse(para).then((res) => {
				console.log('interfacelist.......',res.list);
				this.tableData = res.list;
				this.countTotal = res.count;
				this.listLoading = false;
			});
		},
		//获取饼状图
		getUsers2(){
			let para = {
				size: this.size,
				startDate: this.startDate,
				endDate: this.endDate,
				interfaceType:this.type
			};
			this.listLoading = false;
			interfaceCookie(para).then((res) => {
				if(res.length!=0){
					this.cookieDates = true;
					for(var i=0; i< res.length; i++){
						var cookieData = {};
						cookieData.value = res[i].totalAccessSize;
						cookieData.name = res[i].interfaceName;
						this.cookieArr.push(cookieData);
						this.cookieArr2.push(res[i].interfaceName);
					}
				this.listLoading = false;
				this.echartCookie(this.cookieArr,this.cookieArr2);
				this.cookieArr=[];
				this.cookieArr2=[];
				}else{
					this.cookieDates = false;
				}
				
			});
		},
		//获取柱状图
		getUsers3(startDate,endDate) {
			let para = {
				size: this.size,
				startDate: this.startDate,
				endDate: this.endDate,
				interfaceType:this.type
			};
			this.listLoading = false;
			interfacePillar(para).then((res) => {
				if(res.length!=0){
					this.pillarDates = true;
					for(var i=0; i< res.length; i++){
						this.pillarArr.push(res[i].interfaceName);
						this.pillarArr2.push(res[i].avgProcessTime);
					}
					this.listLoading = false;
					this.echartPillar(this.pillarArr,this.pillarArr2);
					this.pillarArr=[];
					this.pillarArr2=[];
				}else{
					this.pillarDates = false;
				}
			});
		},
		//接口访问详情
		InterfaceDetails(row){
			let para=row;
			para.startDate=this.startDate;
			para.endDate=this.endDate;
			console.log(para);
			sessionStorage.setItem('InterfaceDetails', JSON.stringify(para));
			this.$router.push('/monitor/interfaceDetail');
		},
		// 分页获取
		handleCurrentChange(val) {
			this.pageNumber = val;
			this.getUsers();
		},
		//表格加的属性
		tableRowClassName({rowIndex}) {
			if (rowIndex % 2==0) {	
				return 'success-row';
			} else if (rowIndex % 2 !==0) {
				return 'warning-row';
			}
			return '';
		},
		tableheaderClassName() {
			return "table-head-th";
		},
		echartCookie(arr,arr3){
			//接口响应时间饼状图
			this.zhe = echarts.init(document.getElementById('cookiePic'));
			this.zhe.setOption({
		    title : {
		        text: '接口访问率分布图',
		        x:'center'
		    },
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} 次 ({d}%)"
		    },
		    legend: {
		        orient: 'vertical',
		        left: 'left',
		        data: arr3
		    },
		    series : [
		        {
		            name: '',
		            type: 'pie',
		            radius : '55%',
		            center: ['50%', '60%'],
		            data: arr,
		            itemStyle: {
		                emphasis: {
		                    shadowBlur: 10,
		                    shadowOffsetX: 0,
		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
		                }
		            }
		        }
		    ]
		});
		
		},
		echartPillar(pillarArr,pillarArr2){
		//接口响应时间柱状图
			this.zhu = echarts.init(document.getElementById('postPic'));
			this.zhu.setOption(
			{
				title : {
			        text: '接口响应时间图',
			        x:'center'
			    },
		    	color: ['#3398DB'],
			    tooltip : {
			        trigger: 'axis',
			        axisPointer : {      // 坐标轴指示器，坐标轴触发有效
			            type : 'shadow'  // 默认为直线，可选为：'line' | 'shadow'
			        }
			    },
			    grid: {
			        left: '3%',
			        right: '4%',
			        bottom: '3%',
			        containLabel: true
			    },
			    xAxis : [
			        {
			        	show : false,
			            type : 'category',
			            data :pillarArr ,
			            axisTick: {
			                alignWithLabel: true
			            }
			        }
			    ],
			    yAxis : [
			        {
			            type : 'value',
			            min:1
			        }
			    ],
			    series : [
			        {
			            name:'平均耗时(ms) ',
			            type:'bar',
			            barWidth: '60%',
			            data:pillarArr2
			        }
			    ]
			})
		}
	},
	mounted() {
		if(checkLogin(this)){
			this.requestList();		
		}
	},
	created(){
		let start = new Date();
		const end = new Date();
		this.timeValue =[start,end];
	}
}
</script>
<style scoped>
	.device_list{width:100%;}
	.device_list .head{
		width: 90%;
		margin: 0 auto;
		margin-top: 40px;
		margin-bottom: 40px;
	}
	.device_list .midd{ width:90%;margin: 0 auto; margin-bottom: 50px;};
	.search{margin:30px 60px;};
	.di{
		width:100%;
		margin: 0 auto;
		overflow: hidden;
	}
	.di .di_foot{
		width: 38%;
		padding-bottom: 20px;
		padding-top: 20px;
	}
</style>